<!doctype html>
<html ng-app="myApp">
  <head>
    <title>AngularJS Sorting and Filtering</title>
    <style>table{text-align:center;}td,th{padding:3px;}</style>
  </head>
  <body>
    <div ng-controller="myController">
      <h2>Sorting and Filtering</h2>
      <input type="text" ng-model="filterString">
      <input type="button" ng-click="setFilter()" value="Filter">
      <table>
      <tr>
        <th ng-click="setSort('make')">Make</th>
        <th ng-click="setSort('model')">Model</th>
        <th ng-click="setSort('mp')">MegaPixel</th>
      </tr>
      <tr ng-repeat=
          "camera in filteredCameras | orderBy:column:reverse">
        <td>{{camera.make}}</td>
        <td>{{camera.model}}</td>
        <td>{{camera.mp}}</td>
      </tr>
      </table>
    <script src="http://code.angularjs.org/1.2.9/angular.min.js"></script>
    <script src="/js/angular_filter_sort.js"></script>
  </body>
</html>